<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElMessageBox } from "element-plus"
defineOptions({
  name: "AddDraw"
})
const props = defineProps(["submit", "beforeCloseHook"])
const show = ref(false)
const submitApi = ref("")
function cancelClick() {
  show.value = false
}

const confirmClick = () => {
  ElMessageBox.confirm("确定提交了？")
    .then(() => {
      show.value = false
      console.log("提交成功")
      props.submit()
    })
    .catch(() => {})
}

defineExpose({
  show,
  submitApi
})
function handleClose(done: () => void) {
  ElMessageBox.confirm("确定关闭么？")
    .then(() => {
      console.log(props.beforeCloseHook)
      done()
      props.beforeCloseHook()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<template>
  <el-drawer v-model="show" :before-close="handleClose">
    <template #header="{ titleId }">
      <h4 :id="titleId"><slot name="header"></slot></h4>
    </template>
    <slot name="body"></slot>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped></style>
